<script setup>
import YearPopover from '@/components/PersonalInfo/YearPopover.vue'
import { ref } from 'vue'
import ResponsiblePopover from '@/components/PersonalInfo/ResponsiblePopover.vue'
import { downloadAttachment } from '@/api/comprehensive'
import { message } from 'ant-design-vue'
import { downloadFile } from '@/utils/file'
import { useOpenEcardPage } from '@/composables/open-link.js'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const props = defineProps({
  info: {
    type: Object,
    default: () => {}
  },
  isEyeOpen: {
    type: Boolean
  }
})
function getPopupContainer(triggerNode) {
  return triggerNode.parentNode
}
function getPopupContainers(triggerNode) {
  return triggerNode.parentNode.parentNode
}
const emit = defineEmits(['openPhoneModal', 'openMailModal', 'openECardModal', 'updateCustomInfo'])

function updateCustomInfoFun(yearInfo) {
  emit('updateCustomInfo', yearInfo)
}
function openPhoneModal(info) {
  emit('openPhoneModal', info)
}
function openMailModal(info) {
  emit('openMailModal', info)
}
function openECardModal(info) {
  emit('openECardModal', info)
}
let spinning = ref(false)

async function downloadInsuredFile() {
  if (spinning.value) return
  const params = {
    grpPlanCode: props.info.grpPlanCode, // 计划编码
    grpContNo: props.info.grpContNo, // 内部保单号
    undId: props.info.underwriterId, // 承保商
    insuredId: props.info.insuredId // insuredId
  }
  let res = null
  spinning.value = true
  try {
    res = await downloadAttachment(params)
  } catch (err) {
    console.log('err', err)
  } finally {
    spinning.value = false
  }
  if (res) {
    downloadFile(res)
    message.success('下载成功')
  }
}
function routerGoHome(info) {
  router.push({
    path: '/home/index',
    query: {
      ...route.query,
      insuredId: info.insuredId
    }
  })
}
const getPolicyInfoData = (str) => {
  if (!str) return str
  let strArr = str.split(';')
  return strArr.length
}
</script>
<template>
  <div>
    <div class="custom-card">
      <div class="header">
        <span class="title" @click="routerGoHome(info)">{{ info.member_id }} </span>
        <span class="icon-header">
          <a-tooltip :getPopupContainer="getPopupContainer">
            <template #title>{{ $t('home.card.PolicyFiles') }}</template>
            <span>
              <a-spin :spinning="spinning" size="small">
                <svg-icon
                  name="card-download"
                  class="download-icon"
                  size="22px"
                  @click.native="downloadInsuredFile"
                />
              </a-spin>
            </span>
          </a-tooltip>
          <ResponsiblePopover :info="info">
            <a-tooltip :getPopupContainer="getPopupContainer">
              <template #title>
                <div>{{ $t('home.card.ServiceInfo') }}</div>
              </template>
              <svg-icon name="relative" size="22px" />
            </a-tooltip>
          </ResponsiblePopover>

          <YearPopover
            @updateCustomInfo="updateCustomInfoFun"
            :info="info"
            :isEyeOpen="props.isEyeOpen"
          >
            <a-tooltip :getPopupContainer="getPopupContainer">
              <template #title>{{ $t('home.yearPopover.PolicyYear') }} </template>
              <svg-icon class="year-choose" size="22px" name="year-choose" />
            </a-tooltip>
          </YearPopover>
        </span>
      </div>
      <div class="custom-main" :class="{ 'custom-main-height': info.attr == '同居密友' }">
        <p class="name">
          <a-tooltip placement="topLeft" :getPopupContainer="getPopupContainer">
            <template #title>{{ info.customer_name_query }}</template>
            <span class="title ellipsis">
              <span v-if="info.isolation_flag === 'Y'">(分离)</span>
              {{ info.customer_name_query }}</span
            >
          </a-tooltip>
          <svg-icon
            v-if="info.gender_code == '01' || info.gender_code == '02'"
            :name="info.gender_code == '01' ? 'male' : 'female'"
          />
        </p>
        <p class="birthday-box">
          <span class="birthday">{{ info.birthday }}</span>
          <svg-icon @click="openMailModal(info)" size="14px" name="card-mail" />
          <svg-icon @click="openPhoneModal(info)" size="14px" name="card-phone" />
        </p>
        <!-- 同居密友 样式gap 处理 -->
        <div style="height: 22px">
          <a-flex wrap="wrap" class="tags" :gap="info.relationshipCode == '04' ? 6 : 0">
            <a-tag color="#E8F0F3" v-if="info.mguTpa" class="mgu">{{ info.mguTpa }}</a-tag>
            <a-tag color="#F5EBD5" v-if="info.enrollmentStatus" class="status">{{
              info.enrollmentStatus
            }}</a-tag>
            <a-tag color="#E8F0F3" v-if="info.relationship" class="mgu">{{
              info.relationship
            }}</a-tag>
            <a-tag color="#F5EBD5" v-if="info.vipFlag" class="status center">
              <span>
                {{ info.vipFlag }}
              </span>
              <a-tooltip
                v-if="info.vipNotes"
                trigger="click"
                :getPopupContainer="getPopupContainers"
              >
                <template #title>{{ info.vipNotes }}</template>
                <svg-icon class="icon-tag" name="vip-tip" />
              </a-tooltip>
            </a-tag>
            <a-tag color="#E8F0F3" v-if="info.holdPremium" class="mgu center">
              <span>
                {{ info.holdPremium }}
              </span>
              <a-tooltip
                v-if="info.holdPremiumReason"
                trigger="click"
                :getPopupContainer="getPopupContainers"
              >
                <template #title>{{ info.holdPremiumReason }}</template>
                <svg-icon class="icon-tag" name="guaqi-tip" />
              </a-tooltip>
            </a-tag>
          </a-flex>
        </div>
      </div>
      <div class="custom-items">
        <div class="custom-item">
          <a-tooltip :getPopupContainer="getPopupContainer">
            <template #title> {{ $t('home.card.Underwriter') }} </template>
            <svg-icon class="icon-tag" name="underwriter" />
          </a-tooltip>
          <a-tooltip :getPopupContainer="getPopupContainer">
            <template #title>
              <div>{{ $t('home.card.UW') }}: {{ info.underwriterName }}</div>
              <div>{{ $t('home.card.SubUW') }}: {{ info.subUwName }}</div>
            </template>
            <span class="custom-item-text custom-item-ellipsis">{{ info.underwriterName }}</span>
          </a-tooltip>
        </div>
        <div class="custom-item">
          <a-tooltip :getPopupContainer="getPopupContainer">
            <template #title> {{ $t('home.card.IDType') }} </template>
            <svg-icon class="icon-tag" name="idcard" />
          </a-tooltip>
          <a-tooltip :getPopupContainer="getPopupContainer">
            <template #title>
              <div>
                {{ info.id_type }}
              </div>
              <div>
                {{ info.id_no }}
              </div>
            </template>
            <span class="custom-item-text">{{ info.id_no }}</span>
          </a-tooltip>
        </div>
        <div class="custom-item">
          <a-tooltip :getPopupContainer="getPopupContainer">
            <template #title> {{ $t('home.card.ExternalPolicyNumber') }} </template>
            <svg-icon class="icon-tag" name="insured-num" />
          </a-tooltip>
          <a-tooltip
            v-if="getPolicyInfoData(info.policyNumber) > 2"
            :getPopupContainer="getPopupContainers"
            overlayClassName="policy-number-tooltip-card"
            :arrow="false"
          >
            <template #title>
              <div class="policy-number-tooltip-card">{{ info.policyNumber }}</div>
            </template>
            <span class="custom-item-text custom-item-ellipsis">{{ info.policyNumber }}</span>
          </a-tooltip>
          <span v-else class="custom-item-text custom-item-ellipsis">{{
            info.policyNumber || '-'
          }}</span>
        </div>
        <div class="custom-item">
          <a-tooltip :getPopupContainer="getPopupContainer">
            <template #title> {{ $t('home.card.ECard') }} </template>
            <svg-icon class="icon-tag" name="ecard" />
          </a-tooltip>
          <span class="custom-item-text">{{ $t('home.card.ECard') }} {{ info.ecardStatus }}</span>
          <svg-icon
            class="icon-down"
            @click="useOpenEcardPage(info.member_id, info.insuredId)"
            name="download-ecard"
          />
          <svg-icon
            v-if="$auth('comprehensive:query:eCard:switch')"
            class="icon-edit"
            @click="openECardModal(info)"
            name="edit-ecard"
          />
        </div>
        <div class="custom-item">
          <a-tooltip :getPopupContainer="getPopupContainer">
            <template #title> OB </template>
            <svg-icon class="icon-tag" name="OB" />
          </a-tooltip>
          <span class="custom-item-text">CNY {{ info.un_pay_ob || 0 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.policy-number-tooltip-card {
  width: 435px;
  word-break: break-all;
  .ant-tooltip-inner {
    width: 440px !important;
  }
}
.custom-card {
  width: 370px;
  height: 399px;
  padding: 24px 16px;
  background: #ffffff;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08);
  border-radius: 11px;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    .title {
      margin-left: 8px;
      font-weight: bold;
      font-size: 15px;
      color: $color-text-primary;
      line-height: 22px;
      cursor: pointer;
    }
    .title:hover {
      color: #4d789c;
    }
    .icon-header {
      display: flex;
      align-items: center;
      .svg-icon {
        margin-left: 10px;
        cursor: pointer;
      }
      .ml-0 {
        margin-left: 0;
      }
    }
  }
  .custom-main {
    background: #f9fdfe;
    height: 125px;
    box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    margin: 20px 0;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .birthday-box {
      display: flex;
      align-items: center;
      .birthday {
        font-weight: 500;
        font-size: 14px;
        color: $color-text-regular;
      }
      .svg-icon {
        font-size: 14px;
        margin-left: 8px;
        cursor: pointer;
      }
    }
    .tags {
      position: relative;
      .ant-tag {
        cursor: pointer;
      }
      .mgu {
        color: #4d789c;
      }
      .center {
        display: flex;
        align-items: center;
      }
      .status {
        color: #e39e36;
      }
      .icon-tag {
        font-size: 12px;
        margin-left: 3px;
        path {
          color: #e39e36;
        }
      }
    }
    .name {
      display: flex;
      align-items: center;
      position: relative;
      .title {
        line-height: 22px;
        font-weight: bold;
        font-size: 18px;
        color: $color-text-primary;
        margin-right: 6px;
      }
    }
  }
  .custom-main-height {
    height: 130px;
  }
  .custom-items {
    position: relative;
    .svg-icon {
      cursor: pointer;
    }
    .custom-item {
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 16px;
      line-height: 20px;
      &-text {
        max-width: 314px;
        font-weight: 500;
        font-size: 14px;
        color: $color-text-regular;
        margin-left: 10px;
      }
      &-ellipsis {
        // flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .icon-down {
        margin: 0 6px;
        cursor: pointer;
      }
      .icon-edit {
        cursor: pointer;
      }
    }
  }
}
</style>
